<!-- Header -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>DocAdmin</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="${request.contextPath}/lib/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="${request.contextPath}/lib/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="${request.contextPath}/lib/lte/dist/css/AdminLTE.min.css">

    <!--[if lt IE 9]>
    <script type="text/javascript" src="${request.contextPath}/res/js/html5shiv.min.js"></script>
    <script type="text/javascript" src="${request.contextPath}/res/js/respond.min.js"></script>
    <![endif]-->

    <!-- Google Font -->
    <link rel="stylesheet"
          href="${request.contextPath}/res/font/googleapis/fonts.css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
    <!-- icon -->
    <link rel="shortcut icon" href="${request.contextPath}/res/icon/favicon.ico" type="image/vnd.microsoft.icon">
    <link rel="icon" href="${request.contextPath}/res/icon/favicon.ico" type="image/vnd.microsoft.icon">
<body class="hold-transition login-page">
<div style="background-color: #FAFAF9">
    <div class="login-box">
        <div class="login-logo">
            <a href="#"><b>Sea</b>Admin</a>
        </div>
        <!-- /.login-logo -->
        <div class="login-box-body">
            <p class="login-box-msg">Sign in to start your session</p>
            <form id="loginForm" action="${request.contextPath}/login" method="post">
                <div class="form-group has-feedback">
                    <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
                    <input name="username" class="form-control" placeholder="Account">
                    <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback">
                    <input type="password" name="password" class="form-control" placeholder="Password">
                    <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                </div>
                <div class="row">
                    <div class="col-xs-8">
                        <div class="form-group has-feedback">
                        </div>
                    </div>
                    <!-- /.col -->
                    <div class="col-xs-4">
                        <button type="button" id="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
                    </div>
                    <!-- /.col -->
                </div>
            </form>

            <a href="#">I forgot my password</a><br>
            <a href="./register.ftl" class="text-center">Register a new membership</a>

        </div>
        <!-- /.login-box-body -->
    </div>
    <footer>
        <div class="pull-right hidden-xs">
            Recommend using Google Chrome &nbsp;
        </div>
        &nbsp;<strong>Copyright &copy; <a
                    href="https://gitee.com${request.contextPath}boot${request.contextPath}boot-admin">Mr.css</a>.</strong>
        All rights reserved.<b>Version</b> 1.0.0
    </footer>
    <!-- /.content -->
    <script type="text/javascript" src="${request.contextPath}/lib/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="${request.contextPath}/lib/lte/dist/js/adminlte.min.js"></script>
    <script type="text/javascript" src="${request.contextPath}/lib/layer/layer.js"></script>
    <script type="text/javascript" src="${request.contextPath}/lib/bootstrap/dist/js/bootstrap.min.js"></script>
    <script>
        $(function () {
            if (window !== top) {
                top.location.href = location.href;
            }

            $('#submit').click(function (evt) {
                let res = new FormData(document.getElementById('loginForm'));
                let username = res.get('username');
                if (username.trim().length === 0) {
                    layer.alert('用户名不允许为空！');
                    return;
                }

                let password = res.get('password');
                if (password.trim().length === 0) {
                    layer.alert('密码不允许为空！');
                    return;
                }

                $.ajax({
                    cache: false,
                    type: "POST",
                    url: '${request.contextPath}/login',
                    data: {username: username, password: password},
                    dataType: 'json'
                }).done(function (result) {
                    if (result.code !== 0) {
                        layer.alert(result.data);
                    } else {
                        location.href = '${request.contextPath}/index.ftl';
                    }
                });
            });
        })
    </script>
</div>
</body>
</html>